<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>

    <!--表格-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 50px;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;

        }
    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header>管理员-${user.username}</el-header>
        <el-main>
            <!--搜索表单-->
            <el-form :inline="true" :model="user" class="demo-form-inline">

                <el-form-item label="用户名">
                    <el-input v-model="user.username" placeholder="用户名"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input v-model="user.number" placeholder="手机号"></el-input>
                </el-form-item>

                <el-form-item label="借书证号">
                    <el-input v-model="user.card" placeholder="借书证号"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>

            <!--按钮-->
            <el-row>
                <el-button type="danger" @click="deleteByIds" plain icon="el-icon-delete">批量删除</el-button>
                <el-button type="primary" @click="dialogVisible = true" plain icon="el-icon-circle-plus-outline">新增</el-button>
                <el-button type="info" plain @click="openFullScreen" icon="el-icon-refresh-left">刷新</el-button>
            </el-row><br>

            <!--添加数据的对话框表单-->
            <el-dialog
                    title="新增用户"
                    :visible.sync="dialogVisible"
                    width="30%">

                <el-form ref="form" :model="user" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="user.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input v-model="user.password"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号">
                        <el-input v-model="user.number"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="addUser">添加</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

                </span>
            </el-dialog>

            <!--修改数据的对话框表单-->
            <el-dialog
                    title="修改用户数据"
                    :visible.sync="showDialog"
                    width="30%">

                <el-form ref="form" :model="user" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="user.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input v-model="user.password"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号">
                        <el-input v-model="user.number"></el-input>
                    </el-form-item>

                    <el-form-item label="借书证号">
                        <el-input v-model="user.card"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateUser">确认修改</el-button>
                        <el-button @click="showDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>

                </span>
            </el-dialog>

            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <el-table-column
                            type="index">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="password"
                            label="密码"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="电话号码"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="card"
                            label="借书证号"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            align="center">
                        <template #default="scope">
                            <el-row>
                                <el-button type="primary" @click="sendId(scope.row)" icon="el-icon-edit">修改</el-button>
                                <el-button type="danger" @click="deleteData(scope.row)" icon="el-icon-delete-solid">删除</el-button>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-main>
        <el-footer>图书管理系统</el-footer>
    </el-container>




</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted() {
            this.selectAll();

        },

        methods: {
            //--------------删除数据-------------------
            deleteData(row) {
                console.log(row.id);

                //弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    var _this = this;
                    axios({
                        method: "post",
                        url: "http://localhost:8080/bookstore/user/delete",
                        data: row.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //删除成功

                            //重新查询数据
                            _this.selectAll();

                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            _this.$message({
                                message: '删除失败',
                                type: 'lose'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //---------------点击修改发送id-----------
            sendId(row) {
                console.log(row.id);

                this.user.username = row.username;
                this.user.password = row.password;
                this.user.number = row.number;
                this.user.card = row.card;
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/user/acceptId",
                    data: row.id,
                }).then(function (resp) {
                    if (resp.data == "success") {

                        _this.showDialog = true;
                        _this.$message({
                            message: '开始修改',
                            type: 'success'
                        });
                    }

                })
            },

            //----------------修改用户数据，发送修改的信息-----------
            updateUser(){
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/user/update",
                    data: _this.user
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //修改成功
                        _this.$message({
                            message: '修改成功',
                            type: 'success'
                        });

                        //关闭窗口
                        _this.showDialog = false;

                       setTimeout(()=>{
                           //重新查询数据
                           location.reload();
                       },600);

                    }else {
                        _this.$message({
                            message: '用户名或手机号已存在',
                            type: 'lose'
                        });

                        //关闭窗口
                        _this.showDialog = false;

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);
                    }
                })
            },

            //----------------分页查询数据---------------
            selectAll() {

                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/user/selectByPageAndCondition?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.user
                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount;
                })
            },

            //------------------表单查询方法-------------
            onSubmit() {
                // console.log(this.user);
                this.selectAll();
            },

            //--------------------添加数据-------------------
            addUser() {
                console.log(this.user);
                var _this = this;

                axios({
                    method: "post",
                    url: "http://localhost:8080/bookstore/user/addUser",
                    data: _this.user
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //添加成功

                        //关闭窗口
                        _this.dialogVisible = false;

                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });

                        setTimeout(()=>{
                            //重新查询数据
                            location.reload();
                        },600);

                    }else {
                        _this.$message({
                            message: '你的用户名或手机号已存在',
                            type: 'lose'
                        });
                    }
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            //-------------------复选框选中后执行的-----------------
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection);
            },

            //----------------每页的条目数发送变化----------------
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                //重新设置每页显示条数
                this.pageSize = val;
                this.selectAll();
            },

            //---------------页码发送变化查询的条数--------------
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },

            //-----------------批量删除用户-----------------
            deleteByIds() {

                //弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let sectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = sectionElement.id;
                    }

                    var _this = this;

                    axios({
                        method: "post",
                        url: "http://localhost:8080/bookstore/user/deleteByIds",
                        data: _this.selectedIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //删除成功

                            //重新查询
                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },

            //睡眠方法
            sleep(d){
                return new Promise((resolve => setTimeout(resolve,d)))
            },

            //刷新
            openFullScreen() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                    location.reload();
                }, 1000);
            }
        },

        data() {
            return {
                //每页显示的条数
                pageSize: 5,

                //总记录数
                totalCount: 100,

                //分页工具条的当前页码
                currentPage: 1,

                //对话框是否展示的标记
                dialogVisible: false,

                showDialog: false,

                //书籍的数据
                user: {
                    username: '',
                    password: '',
                    number: '',
                    card: ''
                },

                //复选框选中数据的集合
                multipleSelection: [],

                //被选中的id数组
                selectedIds: [],

                //表格数据
                tableData: [{
                    username: 'admin',
                    password: 'admin',
                    number: '10086',
                    card: 'bookadmin',
                }, {
                    username: 'admin',
                    password: 'admin',
                    number: '10086',
                    card: 'bookadmin',
                }, {
                    username: 'admin',
                    password: 'admin',
                    number: '10086',
                    card: 'bookadmin',
                }, {
                    username: 'admin',
                    password: 'admin',
                    number: '10086',
                    card: 'bookadmin',
                }]
            }
        }
    })


</script>

</body>
</html>